<template>
	<div class="att_list_view ">
		<div class="item column xy_center" v-for="(item, index) in list" :key="item.id"
			@click="handleItemClick(item, index)" :class="{
				'selected-in-picker': isPickerMode && checkboxList.includes(item.id),
				'can-preview': !isPickerMode
			}">
			<div class="top_header row y_center"
				:style="isPickerMode ? (checkboxList.includes(item.id) ? 'top:0!important; background-color: var(--el-color-primary-light-8);' : 'top:-30px;') : (checkboxList.includes(item.id) ? 'top:0!important;' : 'top:-30px;')">
				<el-checkbox style="zoom: 1.2;" size="small" :model-value="checkboxList.includes(item.id)"
					@change="(checked) => checkboxChange(checked, item)" />
				<el-button v-if="!isPickerMode" icon="Delete" link @click.stop="del([item.id])"></el-button>
			</div>
			<div class="content" :class="{ 'picker-mode-content-click': isPickerMode }">
				<fileTypeCoverTem :fileType="item.type" :fileUrl="item.url" :fileCover="item.cover"></fileTypeCoverTem>
			</div>
			<div class="foot">
				<span>{{ item.name }}</span>
			</div>
		</div>
	</div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import fileTypeCoverTem from './fileTypeCover.vue'
import {
	useAttachmentStore
} from "../../../../stores/attachment"
export default {
	components: {
		fileTypeCoverTem
	},
	data() {
		return {
			checkboxList: []
		}
	},
	props: {
		list: {
			type: Array,
			default: () => {
				return []
			}
		},
		isPickerMode: {
			type: Boolean,
			default: false
		},
		pickerMultiple: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		attachmentStore() {
			return useAttachmentStore()
		}
	},
	watch: {
		isPickerMode(newVal) {
			if (newVal) {
				this.checkboxList = [];
				this.emitPickerSelectionChange();
			}
		},
		pickerMultiple(newVal, oldVal) {
			if (this.isPickerMode && newVal === false && this.checkboxList.length > 1) {
				this.checkboxList = [this.checkboxList[0]];
				this.emitPickerSelectionChange();
			}
		}
	},
	methods: {
		handleItemClick(item, index) {
			if (this.isPickerMode) {
				this.checkboxChange(!this.checkboxList.includes(item.id), item);
			}
			this.attachmentStore.currentFileInfo = {
				info: item,
				index: index
			};
		},
		del(ids) {
			if (this.isPickerMode) return;
			ElMessageBox.confirm(
				`确认要删除[${ids.length}]个文件吗, 删除后无法恢复, 已经引用的图片将会失效! `,
				'Warning', {
				confirmButtonText: '彻底删除',
				cancelButtonText: '取消',
				type: 'warning',
			}
			).then(() => {
				this.attachmentStore.del(ids).then(res => {
					if (res.code !== 200) {
						throw new Error(res.message)
					}
					ElMessage.success(res.message)
					this.$emit('refresh')
					this.checkboxList = this.checkboxList.filter(id => !ids.includes(id));
					if (this.isPickerMode) this.emitPickerSelectionChange();
					this.emitSelectionChange();
				}).catch(err => {
					ElMessage.error(err.message)
				})
			})
		},
		checkboxChange(checked, item) {
			const itemId = item.id;
			if (this.isPickerMode) {
				if (checked) {
					if (!this.pickerMultiple) {
						this.checkboxList = [itemId];
					} else if (!this.checkboxList.includes(itemId)) {
						this.checkboxList.push(itemId);
					}
				} else {
					const index = this.checkboxList.indexOf(itemId);
					if (index !== -1) {
						this.checkboxList.splice(index, 1);
					}
				}
				this.emitPickerSelectionChange();
			} else {
				if (checked) {
					if (!this.checkboxList.includes(itemId)) {
						this.checkboxList.push(itemId);
					}
				} else {
					const index = this.checkboxList.indexOf(itemId);
					if (index !== -1) {
						this.checkboxList.splice(index, 1);
					}
				}
				this.emitSelectionChange();
			}
		},
		emitPickerSelectionChange() {
			const selectedFullItems = this.list.filter(listItem => listItem && listItem.id !== undefined && this.checkboxList.includes(listItem.id));
			this.$emit('picker-selection-change', selectedFullItems);
		},
		emitSelectionChange() {
			const selectedFullItems = this.list.filter(listItem => listItem && listItem.id !== undefined && this.checkboxList.includes(listItem.id));
			this.$emit('selection-change', selectedFullItems);
		},
		clearSelection() {
			this.checkboxList = [];
			if (this.isPickerMode) {
				this.emitPickerSelectionChange();
			} else {
				this.emitSelectionChange();
			}
		},
		selectAll(checked) {
			if (checked) {
				this.checkboxList = this.list.map(item => item.id);
			} else {
				this.checkboxList = [];
			}

			if (this.isPickerMode) {
				this.emitPickerSelectionChange();
			} else {
				this.emitSelectionChange();
			}
		}
	}
}
</script>

<style scoped lang="less">
.att_list_view {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 10px;

	.item {
		border-radius: 4px;
		transition: box-shadow 0.2s ease, border-color 0.2s ease;
		position: relative;
		width: 100%;
		overflow: hidden;
		border: 1px solid var(--el-color-info-light-8);

		&.can-preview {
			cursor: pointer;
		}

		&.selected-in-picker {
			border-color: var(--el-color-primary);
			box-shadow: 0 0 5px var(--el-color-primary-light-5);
		}

		&:hover:not(.selected-in-picker) {
			box-shadow: var(--el-box-shadow-light);
		}

		&.item:not(.picker-mode-content-click) {
			cursor: default;
		}

		&.picker-mode-content-click,
		&.item.selected-in-picker {
			cursor: pointer;
		}

		&:hover>.top_header {
			top: 0 !important;
		}

		.top_header,
		.content,
		.foot {
			padding: 0px 5px;
		}

		.top_header {
			z-index: 1;
			justify-content: space-between;
			padding: 0px 5px;
			transition: top 0.3s ease, background-color 0.3s ease;
			position: absolute;
			background-color: var(--el-bg-color-page);
			width: 100%;
			left: 0;
			top: -30px;
		}

		.content {
			height: 130px;

			&.picker-mode-content-click {
				// cursor: pointer;
			}
		}

		.foot {
			z-index: 1;
			padding: 2px 5px;
			background-color: var(--el-bg-color-page);
			color: var(--el-text-color-primary);
			font-size: 12px;
			width: 100%;
			text-align: left;

			span {
				display: block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				width: 100%;
			}
		}
	}
}
</style>